<template>
	<view v-if="pageShow">
		<u-popup :show="show" @close="close" mode="center" :round="18">
			<view>
				<view class="wxbox">
					<view class="textcenter bigtext fonweight" style="color: #E18F82;;">温馨提示</view>
					<view class=" ershiba textcenter" style="color: #F3ADA2;line-height: 60rpx;">{{systeminfo.returncard_des}}</view>
				</view>
				<view class="ershiba xiaohei margin_top textcenter">预计退还金额</view>
				<view class="xiaocheng strongtext margin_top1 textcenter">￥
					<text class="xiaocheng" style="font-size: 48rpx;">{{userInfo.return_price}}</text>
				</view>
				<view class="strongtext margin_top1 textcenter" style="color: #F6B1AB;">金额将会退还到您的储值中！</view>
				<view class="flexbetween margin_top" style="padding-bottom: 30rpx;">
					<view class="wushi flexcenter">
						<text class="xiaohui bigtext" @click="confirmtuika">继续退卡</text>
					</view>
					<view class="line"></view>
					<view class="wushi flexcenter" @click="close">
						<text class="xiaocheng bigtext">考虑一下</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="bntkshow" @confirm="bntkshow=false" confirmColor="#f4713c">
			<view class="slot-content">
				<view class="flexcolumn">
					<u-icon name="error-circle-fill" color="#ff0000" size="40"></u-icon>
					<view class="ershiba xiaohei margin_top textcenter">您退卡后返还金额低于0，不可退卡</view>
				</view>
			</view>
		</u-modal>
		<!-- 会员信息 -->
		<view class="mainpadding block">
			<!-- 已开通会员 -->
			<view class="huibox mainpadding" v-if="userInfo.is_vip">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="touxiang margin_right2">
							<image :src="userInfo.avatar_text" mode=""></image>
						</view>
						<view class="">
							<view class="sanshier fonweight xiaohei">{{userInfo.nickname}}</view>
							<view class="strongtext nofonweight xiaohei" v-if="userInfo.CardNo">{{userInfo.CardNo}}
							</view>
						</view>
					</view>
					<!-- <view class="huanbtn" @click="tzcwhy">立即续费</view> -->
				</view>
				<view class="flexleft">
					<view class="cdtext margin_right1">VIP </view>
					<view class="xiaohei strongtext margin_right1"> ({{userInfo.vip_text}})</view>
					<view class="flexleft" v-if="userInfo.is_return" @click="tuika()">
						<view class="xiaohei strongtext margin_right1">去退卡</view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>

					</view>
				</view>
				<view class="strongtext  xiaohei">有效期至{{userInfo.vip_time}}</view>
			</view>
			<!-- 未开通会员 -->
			<view class="huibox mainpadding" v-if="!userInfo.is_vip">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="touxiang margin_right2">
							<image :src="userInfo.avatar_text" mode=""></image>
						</view>
						<view class="">
							<view class="sanshier fonweight xiaohei">{{userInfo.nickname}}</view>
							<view class="strongtext nofonweight xiaohei" v-if="userInfo.CardNo">{{userInfo.CardNo}}
							</view>
						</view>
					</view>
					<view class="huanbtn" @click="tzcwhy">成为采购员</view>
				</view>
				<image :src="topbanner" mode="widthFix" class="margin_top" @click="tzcwhy" style="width: 100%;"></image>
				<!-- <view class="flexbetween margin_top2">
					<view class="webox beijint1">
						<view class="ershiba xiaofen fonweight">采购主卡</view>
						<view class="smalltext xiaofen nofonweight margin_top1">月卡/季卡/年卡</view>
					</view>
					<view class="">
						<u-icon name="plus" color="#999999" size="20"></u-icon>
					</view>
					<view class="webox beijint2">
						<view class="ershiba xiaofen fonweight">免费赠送</view>
						<view class="smalltext xiaofen nofonweight margin_top1">亲友卡</view>
					</view>
					<view class="">
						<u-icon name="plus" color="#999999" size="20"></u-icon>
					</view>
					<view class="webox beijint3">
						<view class="ershiba xiaofen fonweight">新人礼包</view>
						<view class="smalltext xiaofen nofonweight margin_top1">300元折现券</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 采购员副卡 -->
		<view class="mainpadding" v-if="userInfo.is_vip && userInfo.is_bind==1">
			<view class="ershiba fonweight xiaohei">采购员副卡</view>
			<!-- 未绑定 -->
			<view class="weibd margin_top flexbetween" v-if="!userInfo.f_cardinfo">
				<view class="flexleft">
					<image class="gouwuc margin_right2" src="../static/image/system/hgwc.png" mode=""></image>
					<view class="">
						<view class="sanshier xiaobai ">采购员副卡</view>
						<view class="strongtext xiaobai margin_top2">当前未绑定</view>
					</view>
				</view>
				<view class="banbtn flexcenter" @click="jumper('/pages_mine/bangdingfk')">去绑定</view>
			</view>
			<!-- 已绑定 -->
			<view class="ybad margin_top mainpadding" v-if="userInfo.f_cardinfo">
				<view class="flexleft">
					<view class="flexleft">
						<view class="touxiang margin_right2">
							<image :src="userInfo.f_cardinfo.fCardUser.avatar_text" mode=""></image>
						</view>
						<view class="">
							<view class="ershiba xiaobai">{{userInfo.f_cardinfo.fCardUser.nickname}}</view>
							<view class="strongtext xiaobai margin_top1">{{userInfo.f_cardinfo.CardNo}}</view>
						</view>
					</view>
					<view class="flexbottom">
						<view class="dhuaz">VIP
							<text class="xiaobai strongtext">({{userInfo.vip_text}})</text>
						</view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="strongtext  xiaobai">有效期至：{{userInfo.f_cardinfo.vip_time}}</view>
					<view class="banbtn flexcenter" @click="cancelbind(userInfo.f_cardinfo.ID)">取消绑定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				topbanner: "",
				show: false,
				pageShow: false,
				bntkshow: false,
				userInfo: {},
				systeminfo:{},
			}
		},
		onShow() {
			this.init()
			this.getbanner()
			this.system()
		},
		methods: {
			system(){
				httpRequest.request('/api/index/getConfigInfo','GET',{}).then(res => {
					this.systeminfo = res.data
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					is_more: 2,
					advertise_position_id: 2
				}).then(res => {
					this.topbanner = res.data.image_text
				})
			},
			cancelbind(id) {
				httpRequest.modal('提示', '确认取消绑定副卡吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/user/cancelCard', 'POST', {
							ID: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			tuika() {
				if (this.userInfo.return_price == 0) {
					this.bntkshow = true
					return false
				} else {
					this.show = true
				}
			},
			confirmtuika() {
				this.show = false
				httpRequest.request('/api/user/userCardReturnPrice', 'GET', {}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
					this.pageShow = true
				})
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 跳转购买会员
			tzcwhy() {
				uni.navigateTo({
					url: '/pages_mine/chengweihy'
				})
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.beijint1 {
		background-image: url('@/static/image/system/sy1.png');
	}

	.beijint2 {
		background-image: url('@/static/image/system/sy2.png');
	}

	.beijint3 {
		background-image: url('@/static/image/system/sy3.png');
	}

	.line {
		height: 55rpx;
		width: 2rpx;
		background-color: #E6E6E6;
	}

	.wxbox {
		width: 500rpx;
		padding: 30rpx 60rpx;
		background: linear-gradient(179deg, #fedfd9 0%, rgba(255, 232, 230, 0.5) 100%);
		border-radius: 36rpx 36rpx 100rpx 100rpx;
	}

	.webox {
		// background-color: #ef5212;
		background-size: 100% 100%;
		padding: 10rpx 36rpx 42rpx 10rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.dhuaz {
		font-size: 107rpx;
		font-weight: 400;
		color: #FFCC00;
	}

	.banbtn {
		width: 170rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 35rpx 35rpx 35rpx 35rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #F38136;
	}

	.gouwuc {
		width: 118rpx;
		height: 98rpx;
	}

	.ybad {
		background-image: url('../static/image/system/cgyfk.png');
		background-size: 100% 100%;
	}

	.weibd {
		padding: 50rpx 40rpx;
		background-image: url('../static/image/system/cgyfk.png');
		background-size: 100% 100%;
	}

	.cdtext {
		font-size: 107rpx;
		font-weight: 400;
		color: #F2623A;
	}

	.huanbtn {
		width: 180rpx;
		height: 61rpx;
		background: #FDEB90;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		color: #EF5B32;
	}

	.touxiang {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.huibox {
		background: linear-gradient(180deg, rgba(255, 192, 183, 0.8) 0%, rgba(254, 218, 213, 0.8) 17%, #FFFFFF 100%);
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 28rpx 28rpx 28rpx 28rpx;
	}

	.block {
		background: linear-gradient(179deg, #ffdbd7 0%, rgba(255, 232, 230, 0.5) 100%);
		border-radius: 0rpx 0rpx 36rpx 36rpx;
	}
</style>